<template>
	<view>
		<!--公共头部-->
		<view class="head">
			<my-header :is-back="false" title="登录页面"></my-header>
		</view>
		
		<view class="main-body">
			<view class="mar-top-20">
				<view class="dis_flex jus-cen fon-siz-18">恒鑫驰远成都信息科技有限公司</view>
				<view class="dis_flex jus-cen fon-siz-21 fon-wei-bol mar-top-20">OA管理系统</view>
			</view>
			<view class=" mar-top-20">
				<u-form :model="form" ref="uForm">
					<u-form-item label="账号" prop="username">
						<u-input placeholder="请输入账号" v-model="form.username" />
					</u-form-item>
					<u-form-item label="密码" prop="password">
						<u-input type="password" placeholder="请输入密码" v-model="form.password" />
					</u-form-item>
				</u-form>
				<button hover-class='wsui-btn__hover_list' @click="submit" type="default" style="background: #0051BA;color:#fff;">登  录</button>
			</view>
			
			<view class="mar-top-30">
				<view>欢迎使用<span style="color:#FF9900">恒鑫驰远OA系统</span>，功能会持续不断更新，我们致力做出一套完善的OA体系；</view>
				<view>有遇到问题，请反馈您的宝贵意见。</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import myHeader from '@/components/workbench/header.vue';
	export default {
		data() {
			return {
				form: {
					username: 'admin',
					password: 'admin',
				},
				rules: {
					username: [
						{ 
							required: true, 
							message: '账号不能为空！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					password: [
						{ 
							required: true, 
							message: '密码不能为空！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					]
				}
			}
		},
		onLoad() {
			// this.login();
		},
		methods: {
			// 登录页面
			login(){
				this.$api.login({
					username : this.form.username ,
					password : this.form.password
				},(res)=>{
					if(res.code==200)
					{
						uni.setStorageSync('userInfo',res.data);// 记录用户信息
						uni.showToast({
							title: res.message+',正在跳转',
							icon: "none",
							duration: 2000
						});
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/index/index_home'
							})
						}, 1000);
					}else{
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 2000
						});
					}
				})
			},
			submit() {
				this.load();
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.login();
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		components:{
			myHeader,
		},
	}
</script>

<style>
	/* .bottom{
		position: absolute;
		bottom:20px;
	} */
	.head{
		background:#005687;
	}
	.main-body{
		background:#fff;
		padding:20px;
	}
	.main{
		height:100vh;
	}
</style>
